<script setup>
import api from '@/api/index.js'
import { message } from 'ant-design-vue'
import { computed, ref, h, provide } from 'vue'
import MyTable from '@/components/MyTable/MyTable.vue'
import { Modal } from 'ant-design-vue'
import { getConsants, getOptions } from '@/utils/index.js'

const props = defineProps({
  // 表格数据总条数
  total: { type: Number, default: 0 },
  // 表格当前页码
  pageNum: { type: Number, default: 1 }
})
// 分页参数
const pagination = computed(() => ({
  total: props.total,
  showSizeChanger: false,
  current: props.pageNum,
  onChange: (e) => {
    emits('pageChange', e)
  }
}))

const emits = defineEmits(['edit', 'pageChange', 'reload'])

// 表格列配置
const columns = ref([
  { ellipsis: false, title: '订单名称', dataIndex: 'orderName', key: 'orderName' },
  { ellipsis: false, title: '订单来源', dataIndex: 'source', key: 'source' },
  { ellipsis: false, title: '订单客户', key: 'memberName' },
  { ellipsis: false, title: '商品名称', key: 'goodsName' },
  { ellipsis: false, title: '商品数量', dataIndex: 'buyQuantity', key: 'buyQuantity' },
  { ellipsis: false, title: '单位', key: 'goodsUnit' },
  { ellipsis: false, title: '规格', dataIndex: 'specs', key: 'specs' },
  { ellipsis: false, title: '商品价格', key: 'goodsPrice' },
  { ellipsis: false, title: '商品总价', dataIndex: 'totalMoney', key: 'totalMoney' },
  { ellipsis: false, title: '收款方式', key: 'payType' },
  { ellipsis: false, title: '销售区域', dataIndex: 'area', key: 'area' },
  { ellipsis: false, title: '订单状态', key: 'payStatus' },
  { ellipsis: false, title: '下单时间', dataIndex: 'createTime', key: 'createTime' },
  { ellipsis: false, title: '操作', key: 'set' }
])

//删除数据
const del = (item) => {
  Modal.warning({
    title: '删除订单',
    content: h(
      'span',
      {},
      '是否删除订单：',
      h('span', { style: { color: '#09c690' } }, item.orderName)
    ),
    okText: '删除',
    okCancel: true,
    okButtonProps: { type: 'primary', danger: true },
    cancelButtonProps: { type: 'primary' },
    cancelText: '取消',
    onOk: async () => {
      await api.delXs({ id: item.id })
      message.success('删除成功')
      emits('reload')
      return Promise.resolve()
    },
    onCancel: () => {
      message.success('取消删除')
      return Promise.resolve()
    }
  })
}

const curSlt = ref(null)
const valuePay = ref({
  type: ''
})
const curItem = ref({})
const change = (val) => {
  curSlt.value = val
}

const save = async () => {
  const para = {
    id: curItem.value.id,
    payStatus: curSlt.value ?? curItem.value.payStatus
  }
  await api.changeState(para)
  message.success('保存成功')
  emits('reload')
  curEvent.value.click()
}
//修改收款方式
const savePay = async () => {
  const para = {
    ...curItem.value,
    payType: valuePay.value.type ?? curItem.value.payType
  }

  await api.updateToPay(para)
  message.success('保存成功')
  emits('reload')
  curEvent.value.click()
}
const curEvent = ref()
const open = (event, item) => {
  curEvent.value = event.target
  curItem.value = item
  curSlt.value = null
  valuePay.value = {
    type: ''
  }
}
const formRef = ref()
// 提交表单
const submit = () => {
  formRef.value
    .validateFields()
    .then(savePay)
    .catch((err) => {
      console.log(err)
    })
}
provide('columns', columns.value)
</script>

<template>
  <MyTable :pagination="pagination" :scroll="{ y: 'calc(100vh - 383px)' }">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'info'">
        <!-- <a-popover :overlay-inner-style="{ padding: 0 }" placement="left">
          <template #content>
            <a-timeline style="padding: 20px">
              <a-timeline-item v-for="item of record.products" :key="item.id">
                <div>商品名称：{{ item.goodsName }}</div>
                <div>订单客户：{{ item.memberName }}</div>
                <div>商品价格(元)：{{ item.goodsPrice }}</div>
                <div>单位：{{ item.goodsUnit }}</div>
              </a-timeline-item>
            </a-timeline>
          </template>
          <span style="color: #09c690;">订单详情</span>
        </a-popover> -->
      </template>
      <template v-if="column.key === 'payStatus'">
        {{ getConsants('pay_status', record.payStatus) }}
      </template>
      <template v-if="column.key === 'goodsName'">
        {{ record.products?.[0]?.goodsName }}
      </template>
      <template v-if="column.key === 'memberName'">
        {{ record.products?.[0]?.memberName }}
      </template>
      <template v-if="column.key === 'goodsPrice'">
        {{ record.products?.[0]?.goodsPrice }}
      </template>
      <template v-if="column.key === 'goodsUnit'">
        {{ record.products?.[0]?.goodsUnit }}
      </template>
      <template v-if="column.key === 'specs'">
        {{ record.products?.[0]?.specs }}
      </template>
      <!-- payType -->
      <template v-if="column.key === 'payType'">
        <div>
          {{ record.payType }}
        </div>
      </template>
      <template v-if="column.key === 'set'">
        <a-popover trigger="click" placement="left">
          <template #content>
            <a-select
              class="com-ipt"
              :value="curSlt ?? record.payStatus"
              allowClear
              :options="getOptions('pay_status')"
              :fieldNames="{ label: 'constLabel', value: 'constValue' }"
              style="z-index: 99999"
              @change="change($event, record)"
            />
            <div style="display: flex; flex-direction: row-reverse">
              <AButton type="link" @click="save(record)">保存</AButton>
            </div>
          </template>
          <AButton
            v-if="record?.payStatus !== 3 && record?.appType !== 2"
            type="link"
            @click="open($event, record)"
            >修改状态</AButton
          >
        </a-popover>
        <div v-if="record?.payStatus === 3">
          <a-popover trigger="click" placement="left">
            <template #content>
              <a-form ref="formRef" :model="valuePay" layout="vertical" autocomplete="off">
                <a-form-item
                  label="收款方式"
                  name="type"
                  :rules="[{ required: true, message: '请输入' }]"
                >
                  <a-input v-model:value="valuePay.type" placeholder="请输入收款方式" />
                </a-form-item>
              </a-form>
              <div style="display: flex; flex-direction: row-reverse">
                <AButton type="link" @click="submit(record)">保存</AButton>
              </div>
            </template>
            <AButton type="link" @click="open($event, record)">修改收款方式</AButton>
          </a-popover>
        </div>
        <AButton v-if="record?.payStatus !== 3" type="link" class="com-delbtn" @click="del(record)"
          >删除</AButton
        >
      </template>
    </template>
  </MyTable>
</template>